<template>
	<view class="page test">
		<!-- 演示标题正式环境删除 -->
		<view class="notice">本Demo演示下拉刷新和上拉加载</view>
		<!-- 处理搜索相关 -->
		<view class="search-wrap">
			<!-- 自定义搜索dom结构 start -->
			<u-search v-model="mxListConf.search.text" :showAction="false" @search="onSearch"></u-search>
			<!-- 自定义搜索dom结构 end -->
		</view>
		<!-- 处理列表相关 -->
		<view class="list-wrap">
			<!-- 自定义列表dom结构 start -->
			<view class="news-li" v-for="news in mxListConf.list" :key="news.id">
				<view>{{ news.title }}</view>
				<view class="new-content">
					<text>{{ news.content }}</text>
				</view>
				<view class="new-content">
					<text>{{ news.search }}</text>
				</view>
			</view>
			<!-- 自定义列表dom结构 end -->
		</view>
		<!-- 暂无数据 -->
		<u-empty v-if="mxListConf.list.length == 0 && mxListConf.finished"></u-empty>
		<!-- 加载更多 -->
		<view v-else class="load-more" style="margin-top: 20rpx;">
			<!-- uview2.0 -->
			<!-- 	<u-loadmore :status="uLoadMoreStatus" :loading-text="uLoadMore.loadingText"
				:loadmore-text="uLoadMore.loadmoreText" :nomore-text="uLoadMore.nomoreText"></u-loadmore> -->
			<uni-load-more :status="uniLoadMoreStatus" :loadText="uniLoadMore.loadText"></uni-load-more>
		</view>

	</view>
</template>

<script>
	/**
	 * 本页面提供分页演示
	 * @author maybe
	 */
	import listMixin from './list-mixin.js';
	import {
		getData
	} from './request.js'

	export default {
		mixins: [listMixin],
		components: {},
		data() {
			return {
				/**
				 * url参数
				 */
				query: {},
				/**
				 * 混合配置(list-mixin)
				 */
				mxListConf: {
					/**
					 * 列表必须为key list的数组
					 */
					total: 10, // 数据总条数
					    list: [
					      { id: 1, title: '新闻标题 1', content: '这是新闻内容 1', search: '关键字 1' },
					      { id: 2, title: '新闻标题 2', content: '这是新闻内容 2', search: '关键字 2' },
					      { id: 3, title: '新闻标题 3', content: '这是新闻内容 3', search: '关键字 3' },
					      { id: 4, title: '新闻标题 4', content: '这是新闻内容 4', search: '关键字 4' },
					      { id: 5, title: '新闻标题 5', content: '这是新闻内容 5', search: '关键字 5' },
						  { id: 6, title: '新闻标题 1', content: '这是新闻内容 1', search: '关键字 1' },
						  { id: 7, title: '新闻标题 2', content: '这是新闻内容 2', search: '关键字 2' },
						  { id: 8, title: '新闻标题 3', content: '这是新闻内容 3', search: '关键字 3' },
						  { id: 9, title: '新闻标题 4', content: '这是新闻内容 4', search: '关键字 4' },
						  { id: 10, title: '新闻标题 5', content: '这是新闻内容 5', search: '关键字 5' }
					    ],
					/**
					 * 自定义搜索对象
					 * 该对象会在刷新和搜索的时候自动重置为初始对象
					 * @warn 必须为key为'search'的对象
					 */
					search: {
						text: '',
						arr: [1, 2, 3]
					}
				},
			};
		},
		onLoad(options) {
			console.log('页面onLoad', options)
			// 缓存url参数
			this.query = options;
		},
		methods: {
			/**
			 * 搜索
			 */
			onSearch() {
				// 调用混合搜索
				this.mxListSearchData();
			},

			/**
			 * 数据请求(没错就是这么少的代码)
			 */
			async mxListGetList() {
				// 根据实际情况修改自己修改key 
				let result = await getData({
					page: this.mxListConf.page, // 传入页码
					size: this.mxListConf.size, // 传入每页条数
					...this.mxListConf.search, // 传入搜索的对象
					id: this.query.id
				});
				this.mxListConf.total = result.data.total; //必须设置总数
				this.mxListConf.list.push(...result.data.list); // push数据
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		padding: 40rpx 0rpx;
	}

	/*搜索*/
	.search-wrap {
		padding: 30rpx;
	}

	/*列表*/
	.list-wrap {}

	/*正式环境需要删除*/
	.test {

		/*说明*/
		.notice {
			font-size: 30upx;
			padding: 40upx 0;
			border-bottom: 1upx solid #eee;
			text-align: center;
		}

		/*展示上拉加载的数据列表*/
		.news-li {
			font-size: 32upx;
			padding: 32upx;
			border-bottom: 1upx solid #eee;
			// color: $uni;
			color: red;
		}

		.news-li .new-content {
			font-size: 28upx;
			margin-top: 10upx;
			margin-left: 20upx;
			color: #666;
		}
	}
</style>